<template>
 
    <div>
      <el-card class="card">
        <!-- 搜索区域 -->
        <formSearch @search="searchFn"></formSearch>
        <!-- row组件 -->
        <row style="margin-top: 10px">
          <template>
            <svg-icon icon-class="th" class="icon" />
            <span class="num">数据一共{{ total }}条</span>
          </template>
        </row>
        <!-- table表格展示数据区域 -->
        <el-table ref="singleTable" :data="list" style="width: 100%">
          <el-table-column label="试题编号" prop="number"></el-table-column>
          <el-table-column label="学科" prop="subject"></el-table-column>
          <el-table-column label="目录" prop="catalog"></el-table-column>
          <el-table-column label="题型" prop="questionType"></el-table-column>
          <el-table-column label="题干" prop="question" width="250px">
             <template v-slot="scope">
                     <p v-html="scope.row.question"></p>
             </template>
          </el-table-column>
          <el-table-column label="录入时间" prop="addDate" width="200px">
            <template v-slot="scope">
                 {{getTime(scope.row.addDate)}}
            </template>
          </el-table-column>
          <el-table-column label="难度" prop="difficulty">
             <template v-slot="scope">
                     {{getHard(scope.row.difficulty)}}
             </template>
          </el-table-column>
          <el-table-column label="录入人" prop="creator"></el-table-column>
          <el-table-column label="操作" width="200px">
            <template v-slot="scope">
              <el-button type="primary" icon="el-icon-view" circle plain @click="doPreview(scope.row)"></el-button>
              <el-button type="success" icon="el-icon-edit" circle plain @click="$router.push('/questions/new?id='+scope.row.id)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle plain @click="doDel(scope.row)"></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                circle
                plain
                @click="selectionFn(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
         <el-row
          type="flex"
          justify="end"
          style="margin-top: 20px"
        >
          <el-pagination
            @current-change="handleChange"
            @size-change="pageChange"
            background
            :page-sizes="[5, 10, 15, 20]"
            :page-size="params.pagesize"
            layout="prev, pager, next,sizes, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </el-card>
      <!-- 预览弹框 -->
      <el-dialog title="题目预览" :visible.sync="isShow">
        <!-- 封装的组件 -->
        <questionPreview :row="row" v-if="isShow"></questionPreview>
      </el-dialog>
    </div>

</template>

<script>
import questionPreview from '../components/questions-preview'
import { difficulty } from '../../api/hmmm/constants'
import { parseTime } from '../../utils/index'
import { list, remove, choiceAdd } from '../../api/hmmm/questions'
import formSearch from '../../components/form/formSearch'
export default {
  components: {
    formSearch,
    questionPreview
  },
  data () {
    return {
      list: [],
      params: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      isShow: false,
      row: '',
      publishState: 0 // 0代表当前没有加入精选题库
    }
  },
  mounted () {
    this.getList()
  },

  methods: {
    async getList () {
      const res = await list(this.params)
      this.list = res.data.items
      this.total = res.data.counts
    },
    async getSearch (form) {
      const res = await list(form)
      this.list = res.data.items
      // console.log(this.list)
    },
    searchFn (form) { // 搜索功能
      this.getSearch(form)
    },
    handleChange (page) {
      this.params.page = page
      this.getList()
    },
    pageChange (size) {
      this.params.pagesize = size
      this.getList()
    },
    getTime (t) { // 转换时间的方法
      return parseTime(t)
    },
    getHard (id) { // 得出难度
      const obj = {}
      difficulty.forEach(item => {
        obj[item.value] = item.label
      })
      return obj[id]
    },
    doDel (row) { // 删除事件
      this.$confirm('是否删除该题?').then(() => {
        this.defFn(row)
      }).catch(() => {

      })
    },
    async defFn (row) { // 调用删除的api接口
      await remove(row)
      this.$message.success('删除成功')
      this.getList()
    },
    doPreview (row) { // 点击预览弹框
      this.isShow = true
      this.row = row
    },
    async selectionFn (row) { // 加入精选
      this.publishState = 1
      await choiceAdd(row.id, this.publishState)
      this.$message.success('加入精选成功')
      this.getList()
    }

  }
}
</script>

<style scoped lang='scss'>
.card{
  margin: 10px;
}
.num {
  font-size: 12px;
  color: #909399;
}
.icon {
  margin: 0 10px;
  color: #909399;
}
</style>
